<!-- 月通话统计 -->
<template>
	<div id="phoneStatisByMonth">
		<p class="statis-title card">月累计通话统计</p>
		<!-- <div class="divide"></div> -->
		<div class="count card">
			<div class="count-content">
				<div class="count-item" v-for="item in countData" :key="item.id">
					<div class="count-title">{{ item.label }}</div>
					<div class="count-num">
						<span>{{ item.value }}</span>
						<span>&nbsp;{{ item.unit }}</span>
					</div>
				</div>
				<!-- 测试 -->
				<!-- <div class="count-item" v-for="item in testcountData" :key="item.id">
					<div class="count-title">{{ item.label }}</div>
					<div class="count-num">
						<span v-if="item.type === 'rate'">{{ item.value.toFixed(2) }}%</span>
						<span v-else-if="item.type === 'duration'">{{ item.value.toFixed(1) }}</span>
						<span v-else>{{ item.value }}</span>
					</div>
				</div> -->
			</div>
		</div>
		<div class="statis card">
			<div id="phoneStByMonthBar"></div>
		</div>
	</div>
</template>
<script setup name="phoneStatisByMonth">
	import { onMounted, onUnmounted } from 'vue'
	import * as echarts from 'echarts'
	import biChartApi from '@/api/bi/biChartApi.js'
	import { throttle } from 'lodash'
	import tool from '@/utils/tool.js'
	// ===========================================DATA======================================================
	let colorList = ['#4B75EE', '#1F2C85', '#3B50D0', '#3D76F6', '#3B50D0', '#1F2C85'] //初始色值
	let colorList2 = ['#2657D1', '#5794F7', '#1A3FBE', '#708CE1', '#2A5CEA', '#96BAE4'] //antdv色值
	let chartDom
	let barChart
	//统计图表数据
	let barOption = ref({
		title: {
			text: '出勤调解员（个）',
			textStyle: {
				color: '#fff',
				fontWeight: 400,
				fontSize: 16
			},
			left: '7%'
		},
		color: colorList2,
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			},
			backgroundColor: 'rgba(24, 35, 62, 0.9)',
			borderColor: '#1E4B9C',
			textStyle: {
				color: '#fff',
				align: 'left' // 文本左对齐
			},
		
			valueFormatter: (value) => '出勤调解员：' + value.toFixed(0)
		},
		grid: {
			top: '20%',
			left: '10%',
			right: '5%',
			bottom: '10%'
		},
		xAxis: {
			type: 'category',
			data: [],
			axisLabel: {
				// 轴标签样式
				color: '#fff'
			}
		},
		yAxis: {
			type: 'value',
			// name: '活跃坐席数',
			nameTextStyle: {
				// Y轴名称的样式
				color: '#fff',
				fontSize: 18,
				fontWeight: 600,
				padding: [0, 0, 10, 40] // 调整位置，防止文字遮挡
			},
			axisLabel: {
				// 轴标签样式
				color: '#fff'
			},
			splitLine: {
				// 分割线样式
				lineStyle: {
					color: 'rgba(255,255,255,0.1)'
				}
			}
		},
		series: [
			{
				data: [],
				type: 'bar',
				barMaxWidth: 40
			}
		]
	})
	//统计展示数据
	let countData = ref([
		{
			id: 1,
			label: '调解电话总数',
			type: 'number',
			field: 'callTotal',
			value: 0,
			unit: '个'
		},
		{
			id: 2,
			label: '调解电话接通数',
			type: 'number',
			field: 'callCompletionTotal',
			value: 0,
			unit: '个'
		},
		{
			id: 3,
			label: '呼出电话接通率',
			type: 'rate',
			field: 'callCompletionRate',
			value: 0,
			unit: '%'
		},
		// {
		// 	id: 4,
		// 	label: '出勤调解员',
		// 	type: 'number',
		// 	field: 'activeSeatsNum',
		// 	value: 0,
		// 	unit: '个'
		// },
		// {
		// 	id: 5,
		// 	label: '调解总时长',
		// 	type: 'duration',
		// 	field: 'totalCallDuration',
		// 	value: 0,
		// 	unit: '分钟'
		// },
		{
			id: 6,
			label: '呼出调解时长',
			type: 'duration',
			field: 'callDurationOutgoing',
			value: 0,
			unit: '分钟'
		},
		// {
		// 	id: 7,
		// 	label: '呼入调解接听率',
		// 	type: 'rate',
		// 	field: 'incomingCallRate',
		// 	value: 0,
		// 	unit: '%'
		// },
		// {
		// 	id: 8,
		// 	label: '呼入调解接听总数',
		// 	type: 'number',
		// 	field: 'totalIncomingCall',
		// 	value: 0,
		// 	unit: '个'
		// }
	])
	// ===========================================WATCH=====================================================
	// ===========================================LIFECYCLE HOOKS===========================================
	onMounted(() => {
		setTimeout(async () => {
			chartDom = document.getElementById('phoneStByMonthBar')
			barChart = echarts.init(chartDom)
			//测试数据
			// barOption.value.xAxis.data = [
			// 	'04-01',
			// 	'04-02',
			// 	'04-03',
			// 	'04-04',
			// 	'04-05',
			// 	'04-06',
			// 	'04-07',
			// 	'04-08',
			// 	'04-09',
			// 	'04-10',
			// 	'04-11',
			// 	'04-12',
			// 	'04-13',
			// 	'04-14'
			// ]
			// barOption.value.series[0].data = [120, 200, 150, 80, 70, 110, 130, 100, 180, 160, 80, 70, 110, 130]
			// barChart.setOption(barOption.value)

			// 处理数据
			const biResult = await getData()

			countData.value.forEach((item) => {
				switch (item.type) {
					case 'duration':
						item.value = tool.formatNumber(biResult[item.field].toFixed(2))
						break
					case 'rate':
						item.value = `${tool.formatNumber(biResult[item.field].toFixed(2))}`
						break
					default:
						item.value = tool.formatNumber(biResult[item.field])
						break
				}
			})
			//图表数据
			let xAxisData = []
			let seriesData = []
			const activeSeatsList = JSON.parse(biResult.activeSeats)
			// console.log('activeSeatsList: ', activeSeatsList)
			activeSeatsList.forEach((item) => {
				xAxisData.push(item.biMonth.substr(5))
				seriesData.push(item.activeSeatsNum)
			})
			barOption.value.xAxis.data = xAxisData
			barOption.value.series[0].data = seriesData
			barChart.setOption(barOption.value)
		}, 1000)
		// 自适应大小
		const handlePhoneStResize = throttle(() => {
			setTimeout(() => {
				barChart && barChart.resize()
			}, 500)
		}, 200)
		window.addEventListener('resize', handlePhoneStResize)
	})
	// 组件卸载时清理
	onUnmounted(() => {
		window.removeEventListener('resize', handlePhoneStResize)
		barChart?.clear()
	})
	// ===========================================METHODS==================================================
	// ===========================================REQUEST==================================================
	const getData = async () => {
		const res = await biChartApi.getResultByType('MONTH_CALL_STATISTICS_DAY')
		return JSON.parse(res.biResult)
	}
</script>
<style lang="less" scoped>
	#phoneStatisByMonth {

		.statis-title {
			font-size: 20px;
			font-weight: 600;
			text-align: left;
			margin-bottom: 0;
			letter-spacing: 4px;
			line-height: 20px;
		}
		// .divide {
		// 	width: 100%;
		// 	height: 2px;
		// 	background: linear-gradient(90deg, #3d76f6, #3b50d0, #1f2c85);
		// 	box-shadow: #8390b3 0px 0px 8px;
		// }
		/**数字统计**/
		.count {
			margin: 10px 0;
			.count-content {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				// grid-row-gap: 25px;
				.count-item {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					.count-title {
						font-size: 16px;
					}
					.count-num {
						span:nth-child(1) {
							font-size: 38px;
							font-weight: 800;
							color: #bae0ff;
							margin-top: 10px;
						}
						span:nth-child(2) {
							font-size: 18px;
							font-weight: 700;
						}
					}
				}
			}
		}
		.statis {
			flex: 1;
			#phoneStByMonthBar {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
